@charset "UTF-8";
@import "fun";
@import "media";

$yellow: #fac601;
.thwartwise{
	display: none;
}


.main{
	.loader-inner{
		display: none;
	}
	.loading{
		display: none;
	}

	background: $yellow;
	overflow: hidden;
}


.main-box{
	@extend %wh100;
}

.bot-active{
	&:active{
		@include suof(0.95);
	}
}
.bot-ac9{
	@include suof(0.95);
}
.index{
	@extend %wh100;
	padding-top: 6%;
	overflow: hidden;
	display: none;

	img{
		width: 100%;
	}
	
	.title,
	.banner{
		width: 85%;
		margin: 0 auto;
	}
	.title{
		@include zhongz(-200px);
		opacity: 0;
		@extend %ani3;
	}
	.banner{
		@include zhongz(200px);
		opacity: 0;
		@extend %ani3;
	}
	.bot{
		width: 40%;
		margin: 0 auto;
		@include zhongz(200px);
		@include delay(200ms);
		opacity: 0;
		@extend %ani3;
		
		span{
			display: block;
			width: 100%;
			margin: 10px 0;
			@extend %ani1;
		}
	}
	.z-cx{
		@include zhongz(0px);
		opacity: 1;
	}

	.guize{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: none;
		background: rgba(0,0,0,.8);

		.guize-box{
			width: 90%;
			border: 5px solid #0c0c0b;
			background: #fff9b1;
			margin: 20vw auto;
			padding: 10px;
			border-radius: 10px;

			h3{
				width: 100%;
				text-align: center;
			}
			p{
				font-weight: 500;
			}
		}
	}
}

.game{
	position: relative;
	@extend %wh100;
	display: none;

	img{
		width: 100%;
	}
	.max{
		position: absolute;
		top: 5%;
		left: 0;
		z-index: 5;
		width: 100%;
		@extend %ani3;
		@include zhongz(-200px);
		opacity: 0;

		figure{
			width: 35%;
			margin: 0 auto;
			transform-origin: center bottom;
		}
		.mab{
			width: 311px;
			height: 89px;
			margin: 0 auto;
			background-image: url(../images/1.png);
			background-size: 100% auto;
			background-position: 0 0;

			@include zsy(android){
				transform: scale(1.15);
			}
			@include zsy(xiaomi){
				transform: scale(1.1);
			}
			@include zsy(iphone4){
				transform: scale(0.9);
			}
			@include zsy(iphone5){
				transform: scale(0.9);
			}
		}

		.star{
			position: absolute;
			top: 55%;
			left: 46%;

			span{
				width: 36px;
				height: 36px;
				position: absolute;
				top: 0;
				left: 0;
				background: {
					image: url(../images/star.png);
					size: 100%;
				}
				transform: scale(0) translate(0px, 0px) rotate(0deg);
				opacity: 1;
			}
			@keyframes one{
				80%{
					transform: scale(0.8) translate(8px, 16px) rotate(288deg);
					transition: all 600ms linear;
					opacity: 1;
				}
				100%{
					transform: scale(1) translate(10px, 20px) rotate(360deg);
					transition: all 600ms linear;
					opacity: 0;
				}
			}
			@keyframes two{
				80%{
					transform: scale(0.8) translate(-16px, 16px) rotate(288deg);
					opacity: 1;
				}
				100%{
					transform: scale(1) translate(-20px, 20px) rotate(360deg);
					opacity: 0;
				}
			}
			@keyframes three{
				80%{
					transform: scale(0.8) translate(-40px, 24px) rotate(288deg);
					opacity: 1;
				}
				100%{
					transform: scale(1) translate(-50px, 30px) rotate(360deg);
					opacity: 0;
				}
			}
			@keyframes four{
				80%{
					transform: scale(0.8) translate(-8px, 36px) rotate(288deg);
					opacity: 1;
				}
				100%{
					transform: scale(1) translate(-10px, 45px) rotate(360deg);
					opacity: 0;
				}
			}
			.one{
				animation: one 700ms ease-out;
			}
			.two{
				animation: two 700ms ease-out 50ms;
			}
			.three{
				animation: three 700ms ease-out 100ms;
			}
			.four{
				animation: four 700ms ease-out 150ms;
			}
		}
	}

	.big{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		@extend %wh100;
		@extend %ani3;
		@include zhongz(200px);
		opacity: 0;

		.xiong-box{
			width: 320px;
			height: 540px;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 5;
			transform-origin: center bottom;
			@include zsy(android){
				transform: scale(1.15);
			}
			@include zsy(xiaomi){
				transform: scale(1.1);
			}
			@include zsy(iphone6){
				transform: scale(1.1);
			}
			@include zsy(plus){
				transform: scale(1.2);
			}

			.xiong{
				width: 320px;
				height: 540px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 11;
			}
			
			.lian{
				width: 320px;
				height: 540px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 11;
				background-image: url(../images/big-r.png);
				background-size: auto 100%;
				background-position: -6400px 0px;
			}
		}

		.panzi{
			@extend %wh100;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 3;
			
			$panziW: 30vw;
			.left{
				width: $panziW;
				height: 50vh;
				position: absolute;
				left: 5%;
				bottom: 0%;
			}
			.right{
				width: $panziW;
				height: 50vh;
				position: absolute;
				right: 5%;
				bottom: 0%;
			}
			span{
				width: $panziW;
				height: $panziW * 0.2973;
				position: absolute;
				top: 0;
				left: 0;
				-webkit-transition: transform 500ms ease;
				transition: transform 500ms ease;
				background: {
					image: url(../images/panzi.png);
					size: 100%;
				}
				
				@for $i from 1 to 10 {
					&:nth-child(#{$i}){
						transition-delay: calc((9 - #{$i}) * 200ms);
						transform: translate(0, calc(#{$i} * 20px));
						z-index: calc(9 - #{$i});
					}
				}
			}
			.left{
				@for $i from 1 to 10 {
					.l-#{$i}{
						transform: translate(-200px, calc(#{$i} * 20px));
					}
				}
			}
			.right{
				@for $i from 1 to 10 {
					.r-#{$i}{
						transform: translate(200px, calc(#{$i} * 20px));
					}
				}
			}
		}

		.shousi{
			width: 320px;
			height: 110.5px;
			position: absolute;
			bottom: 0;
			z-index: 5;
			transform-origin: center bottom;

			@include zsy(android){
				transform: scale(1.3);
			}
			@include zsy(xiaomi){
				transform: scale(1.2);
			}
			@include zsy(plus){
				transform: scale(1.3);
			}
			@include zsy(iphone6){
				transform: scale(1.2);
			}

			.dizuo{
				width: 320px;
				height: 110.5px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 3;
			}
			.ss{
				width: 320px;
				height: 110px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 5;
				background: {
					image: url(../images/ss1.png);
					size: 100% auto;
					position: 0 0;
				}
			}
		}
	}
	.game-show{
		@include zhongz(0px);
		opacity: 1;
	}
	.bot{
		position: absolute;
		bottom: 5%;
		left: 0;
		width: 100%;
		height: 25%;
		z-index: 5;
		display: none;

		.botton{
			position: absolute;
			left: 25%;
			z-index: 3;
			width: 50%;
			margin: 0 auto;
			
			&:active{
				input{
					transform: scale(0.9);
				}
			}

			input{
				width: 50vw;
				height: 50vw * 0.3565;
				border: 0;
				outline:medium;
				@extend %ani1;
				background: {
					image: url(../images/b-7.png);
					size: 100%;
					color: rgba(0,0,0,0);
				}
				&:active{
					transform: scale(0.9);
				}
			}
			img{
				&:last-child{
					width: 70%;
					transform: translate(140px, -140px);
					@include zsy(iphone5){
						transform: translate(100px, -120px);
					}
				}


			}
		}
	}
}

.coupon-box{
	width: 100%;
	height: 100%;
	padding-top: 5%;
	display: none;
	
	img{
		width: 100%;
	}

	.true{
		width: 100%;
		height: 100%;
		display: none;

		.title{
			width: 85%;
			margin: 0 auto;
			@extend %ani3;
			@include zhongz(-200px);
			opacity: 0;
		}
		
		.coupon{
			height: 80vw;
			width: 80vw * 0.9045;
			margin: 0 auto;
			background-size: 100% 100%;
			position: relative;

			a{
				display: block;
				width: 100%;
				height: 100%;

				span{
					position: absolute;
					bottom: 2vw;
					right: 2vw;
					width: 40%;
				}
			}
			@include delay(100ms);
			@extend %ani3;
			@include zhongz(200px);
			opacity: 0;
		}
		
		.bot{
			width: 80vw * 0.9045;
			margin: 5vw auto;
			display: flex;
			justify-content: space-between;

			span{
				display: inline-block;
				width: 45%;
				@extend %ani1;
			}
			@include delay(200ms);
			@extend %ani3;
			@include zhongz(200px);
			opacity: 0;
		}

		.coupon-show{
			@include zhongz(0px);
			opacity: 1;
		}
		@mixin bg($url){
			background-image: url(../images/#{$url});
		}
		.one{
			@include bg('q-1.png');
		}
		.two{
			@include bg('q-2.png');
		}
		.three{
			@include bg('q-3.png');
		}
		.four{
			@include bg('q-4.png');
		}
	}
	.false{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: $yellow;
		padding-top: 10vh;
		display: none;

		.coupon{
			width: 100vw;
			margin: 0 auto;

			@extend %ani3;
			@include zhongz(-200px);
			opacity: 0;
		}
		.bot{
			width: 80vw;
			margin: 5vw auto;
			display: flex;
			justify-content: space-between;

			@include delay(100ms);
			@extend %ani3;
			@include zhongz(200px);
			opacity: 0;

			span{
				display: inline-block;
				width: 45%;
				@extend %ani1;
			}
		}

		.coupon-show{
			@include zhongz(0px);
			opacity: 1;
		}
	}
	.share{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		display: none;

		.one{
			width: 70%;
			float: right;
			transform: translate(-10px, 10px);
		}
		.back{
			position: relative;
			top: 40px;
			display: block;
			width: 50%;
			margin: 40px auto;
			@extend %ani1;
		}
	}
	.ewm{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		padding-top: 20vh;
		display: none;	

		.one{
			width: 70%;
			display: block;
			margin: 0 auto;
		}
		.back{
			display: block;
			width: 50%;
			margin: 40px auto;
			@extend %ani1;
		}
	}
}

.voucher{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;

	.voucher-box{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;

		.vou-b-tap{
			width: 100%;
			height: 8vh;
			display: flex;
			justify-content: space-between;

			span{
				display: block;
				width: 33.3%;
				height: 8vh;
				line-height: 8vh;
				text-align: center;
				border-bottom: 2px solid $yellow;
				background: #fff;
				cursor: pointer;
			}
			.active{
				background: $yellow;
			}
		}
		.vou-b-body{
			width: 100%;
			position: relative;

			.bbox{
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: none;

				ul{
					width: 100%;
					margin: 0;
					list-style-type: none;
					padding: 0;
					

					li{
						width: 95vw;
						margin: 10px auto;
						border: 1px solid #9d9d9d;
						padding: 1.5vw;
						position: relative;
						
						a{
							@include clearfix();
							text-decoration: none;
							display: block;
							color: #000;
							width: 100%;
							height: 100%;

							.vou-pic{
								width: 30vw;
								height: 30vw * 0.6842;
								float: left;
								border: 1px solid $yellow;
								background-position: center;
								background-size: cover;
							}

							.vou-text{
								width: 60vw;
								float: left;
								padding-left: 8px;

								&:before{
									display: block;
									width: 100%;
									font-size: 1.25em;
									font-weight: 500;
									margin: 5px 0;
								}
								&:after{
									content: '凭本券10元可兑组合产品（限堂食）';
									display: block;
									width: 100%;
									font-size: 0.9em;
									color: #7b7b7b;
								}
							}
						}
						
						&:after{
							display: block;
							padding: 5px 15px;
							position: absolute;
							bottom: 5px;
							background: $yellow;
							right: 0;
							@include hengz(3px);
						}
					}

					.one a{
						.vou-pic{
							background-image: url(../images/v-1.png);
						}
						.vou-text{
							&:before{
								content: '大满足尝鲜券';
							}
						}
					}
					.two a{
						.vou-pic{
							background-image: url(../images/v-2.png);
						}
						.vou-text{
							&:before{
								content: '大满足激赏券';
							}
						}
					}
					.three a{
						.vou-pic{
							background-image: url(../images/v-3.png);
						}
						.vou-text{
							&:before{
								content: '三文鱼刺身券';
							}
						}
					}
					.four a{
						.vou-pic{
							background-image: url(../images/v-4.png);
						}
						.vou-text{
							&:before{
								content: '特选刺身拼盘券';
							}
						}
					}
				}
			}
			
			.wsy ul li{
				&:after{
					content: '未使用';
				}
			}
			.ysy ul li{
				&:after{
					content: '已使用';
				}
			}
			.ygq ul li{
				&:after{
					content: '已过期';
				}
			}
			.active{
				display: block;
			}
		}
	}
}


.ex-voucher{
	width: 100%;
	height: 100%;
	background: #fff;
	padding: 10px;

	.quan{
		width: 95vw;
		margin: 0 auto 10px auto;
		border: 1px solid #9d9d9d;
		padding: 1.5vw;
		position: relative;
		
		a{
			@include clearfix();
			text-decoration: none;
			display: block;
			color: #000;
			width: 100%;
			height: 100%;

			.vou-pic{
				width: 30vw;
				height: 30vw * 0.6842;
				float: left;
				border: 1px solid $yellow;
				background-position: center;
				background-size: cover;
			}

			.vou-text{
				width: 60vw;
				float: left;
				padding-left: 8px;

				&:before{
					display: block;
					width: 100%;
					font-size: 1.25em;
					font-weight: 500;
					margin: 5px 0;
				}
				&:after{
					content: '凭本券10元可兑组合产品（限堂食）';
					display: block;
					width: 100%;
					font-size: 0.9em;
					color: #7b7b7b;
				}
			}
		}
		.one a{
			.vou-pic{
				background-image: url(../images/v-1.png);
			}
			.vou-text{
				&:before{
					content: '大满足尝鲜券';
				}
			}
		}
		.two a{
			.vou-pic{
				background-image: url(../images/v-2.png);
			}
			.vou-text{
				&:before{
					content: '大满足激赏券';
				}
			}
		}
		.three a{
			.vou-pic{
				background-image: url(../images/v-3.png);
			}
			.vou-text{
				&:before{
					content: '三文鱼刺身券';
				}
			}
		}
		.four a{
			.vou-pic{
				background-image: url(../images/v-4.png);
			}
			.vou-text{
				&:before{
					content: '特选刺身拼盘券';
				}
			}
		}
		&:after{
			display: block;
			padding: 5px 15px;
			position: absolute;
			bottom: 5px;
			background: $yellow;
			right: 0;
			@include hengz(3px);
		}
	}
	.one a{
		.vou-pic{
			background-image: url(../images/v-1.png);
		}
		.vou-text{
			&:before{
				content: '大满足尝鲜券';
			}
		}
	}
	.two a{
		.vou-pic{
			background-image: url(../images/v-2.png);
		}
		.vou-text{
			&:before{
				content: '大满足激赏券';
			}
		}
	}
	.three a{
		.vou-pic{
			background-image: url(../images/v-3.png);
		}
		.vou-text{
			&:before{
				content: '三文鱼刺身券';
			}
		}
	}
	.four a{
		.vou-pic{
			background-image: url(../images/v-4.png);
		}
		.vou-text{
			&:before{
				content: '特选刺身拼盘券';
			}
		}
	}

	.wsy{
		&:after{
			content: '未使用';
		}
	}
	.ysy{
		&:after{
			content: '已使用';
		}
	}
	.ygq{
		&:after{
			content: '已过期';
		}
	}
	.active{
		display: block;
	}

	.quan-intro{
		width: 100%;
		p{
			margin: 5px 0;
			width: 100%;
			text-align: right;
			color: #7b7b7b;
			font-size: 0.8em;

			&:last-child{
				margin-top: 20px;
			}
		}
	}

	.quan-ma{
		width: 100%;
		margin-top: 3vw;
		text-align: center;

		#ewm{
			display: inline-block;
			width: 40vw;
			height: 40vw;

			canvas{
				width: 100%;
				height: 100%;
			}
		}
		.tm-pic{
			display: inline-block;
			width: 80vw;
			height: 20vw;
			margin-top: 2vw;
			
			#tmPic{
				width: 100%;
				height: 100%;
			}
		}
		.tm-num{
			width: 100%;
			text-align: center;
			letter-spacing: 0.3em;
			margin: 8px 0;
		}
	}

	.quan-dh{
		width: 100%;
		text-align: center;
		
		input{
			width: 80%;
			height: 10vw;
			border: none;
			text-align: center;
		}
		.text{
			margin-bottom: 10px;
			border-bottom: 1px solid #9d9d9d;
		}
		.button{
			color: #fff;
			border-radius: 5px;
			background: $yellow;
		}
	}

	.quan-guize{
		width: 80%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		p{
			text-decoration: underline;
			color: #ff5555;
			display: inline-block;
			font-size: 0.8em;
			cursor: pointer;
		}
	}
}

.ex-tiaokuan{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	display: none;

	div{
		margin: 10vw auto;
		width: 90%;
		border: 2px solid #000;
		border-radius: 5px;
		background: #fff9b1;
		padding: 0 15px;

		h3{
			color: #9e3a13;
			text-align: center;
			font-size: 1.5em;
		}
		p{
			font-size: 0.9em;
		}
	}
}

.ex-mendian{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	display: none;

	.box{
		width: 80vw;
		height: 80vh;
		margin: 10vh auto;
		background: #fff;
		border-radius: 10px;

		.title{
			width: 100%;
			height: 10vh;
			line-height: 10vh;
			position: relative;
			border-bottom: 1px solid #949494;

			p{
				width: 100%;
				text-align: center;
				line-height: 10vh;
			}
			.ex-close{
				width: 4vh;
				height: 4vh;
				position: absolute;
				right: 3vh;
				top: 3vh;
				background: url(../images/close.png);
				background-size: 100% 100%;
			}
		}

		.md-list{
			width: 100%;
			height: 68vh;
			overflow: hidden;
			overflow-y: scroll;
			padding-bottom: 2vh;

			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;

				p{
					font-size: 0.8em;
					line-height: 1.5em;
					margin: 0;
					padding: 0 0 0 10px;
					border-bottom: 1px solid #d3d3d3;
					font-weight: bold;
				}
				li{
					padding: 15px 10px;
					color: #949494;
					border-bottom: 1px solid #d3d3d3;
				}
			}
		}
	}
}

.ex-tishi{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	margin-top: 38vh;
	display: none;
	text-align: center;

	p{
		display: inline-block;
		padding: 10vw 15vw;
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.9);
		color: #fff;
	}
}